<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top ">
  <!-- Brand/logo -->
  <a class="navbar-brand " href="#" style="width:150px;margin-left:4% ;">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!-- Links -->

  <ul class="navbar-nav collapse navbar-collapse">
    <li class="nav-item">
      <a class="nav-link" href="#">首页</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">吃喝</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">玩乐</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">关注公众号</a>
    </li>
    <form class="form-inline collapse navbar-collapse">
      <input type="text" class="form-control" style="height:30px;" (click)="$event.stopPropagation(); c(true)"
        [class.click]="formActive" data-toggle="popover" data-placement="bottom" data-content="Content" />
      <span class="input-group-btn" style="padding:5px;">
        <button class="btn btn-warning btn-3d btn-sm" type="button">
          搜索
        </button>
      </span>
    </form>

    <a href="#" class="btn btn-link btn-sm" role="button">注册</a>
    <a href="#" class="btn btn-link btn-sm" role="button">登录</a>
    <a href="#" class="btn btn-danger btn-sm" role="button" style="margin-left:20px;">写文章</a>
  </ul>
</nav>
